<template>
  <div>
    <TopFilter :list="topFilterList" :cols="3" labelWidth="85" :collapse="false" @filterChange="changeHandle"></TopFilter>
    <FilterTable
      ref="table"
      height="300"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :isPagination="false"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="selectChange"
    ></FilterTable>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9999,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDialog">关 闭</el-button>
      <el-button type="primary" @click="confirmHandle">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { getBrandListNoOEM, vehicleDetail } from '@/api/vehicle/order/maintain';

export default {
  name: 'ProdPanel',
  mixins: [dictionary],
  data() {
    return {
      topFilterList: this.createTopFilters(),
      orderType: '40051003',
      fetchApi: vehicleDetail,
      selectedRows: [],
      fetchParams: { xhrAbort: true },
      columns: this.createTableColumns()
    };
  },
  created() {
    this.getAllData();
  },
  methods: {
    async getAllData() {
      const res1 = await getBrandListNoOEM({ dateSource: 10451003 });
      this.topFilterList[0].itemList = res1.map(x => ({ text: x.BRAND_NAME, value: x.BRAND_ID }));
    },
    createTopFilters() {
      return [
        {
          type: 'SELECT',
          label: '品牌名称',
          fieldName: 'brandId',
          placeholder: '请选择',
          itemList: []
        },
        {
          type: 'SELECT',
          label: '车系名称',
          fieldName: 'seriesId',
          placeholder: '请选择',
          itemList: [
            { text: '热点', value: '1' },
            { text: '资讯', value: '2' }
          ]
        },
        {
          type: 'SELECT',
          label: '车型名称',
          fieldName: 'modelId',
          placeholder: '请选择',
          itemList: [
            { text: '热点', value: '1' },
            { text: '资讯', value: '2' }
          ]
        },
        {
          type: 'SELECT',
          label: '配置名称',
          fieldName: 'configId',
          placeholder: '请选择',
          itemList: [
            { text: '热点', value: '1' },
            { text: '资讯', value: '2' }
          ]
        },
        {
          type: 'INPUT',
          label: '产品代码',
          fieldName: 'productCode',
          placeholder: '产品代码...'
        },
        {
          type: 'INPUT',
          label: '产品名称',
          fieldName: 'productName',
          placeholder: '产品名称...'
        },
        {
          type: 'SELECT',
          label: 'MTOC类型',
          fieldName: 'mtoc',
          placeholder: '请选择',
          initialValue: '40111002',
          disabled: true,
          itemList: [{ text: '量产车型', value: '40111002' }]
        },
        {
          type: 'INPUT',
          label: '颜色',
          fieldName: 'color',
          placeholder: '颜色...'
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '数量',
          dataIndex: 'COUNT',
          width: 120,
          sorter: true,
          editable: true,
          defaultEditable: true,
          editType: 'number',
          precision: 0,
          max: 1000,
          min: 0
        },
        {
          title: '产品代码',
          dataIndex: 'PRODUCT_CODE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '产品名称',
          dataIndex: 'PRODUCT_NAME',
          width: 200,
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '标准价格',
          dataIndex: 'PRICE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: 'MTOC类型',
          dataIndex: 'MTOC_TYPE',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('4011'),
          render: props => {
            return <span>{this.createDictText(props.row.MTOC_TYPE, '4011')}</span>;
          }
        },
        {
          title: '品牌名称',
          dataIndex: 'BRAND_NAME',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车系名称',
          dataIndex: 'SERIES_NAME',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '车型名称',
          dataIndex: 'MODEL_NAME',
          width: 180,
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '配置名称',
          dataIndex: 'PACKAGE_NAME',
          width: 180,
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '颜色',
          dataIndex: 'COLOR_NAME',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    selectChange(rows) {
      this.selectedRows = rows;
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val, { orderType: this.orderType, xhrAbort: false });
    },
    closeDialog() {
      this.$emit('close', false);
    },
    confirmHandle() {
      if (!this.selectedRows.length) {
        return this.closeDialog();
      }
      if (this.selectedRows.some(x => Number(x.COUNT) <= 0)) {
        return this.$notify({
          title: '提示信息',
          message: '数量不能为空，且必须大于 0',
          type: 'error'
        });
      }
      this.$emit('change', this.selectedRows);
      this.closeDialog();
    }
  }
};
</script>

<style lang="less" scoped></style>
